// out:  style.css,sourcemap: true, compress: false
@color: #4d926f;
@root-font-size: 20px;
@root-rem: 20rem;
@rem: @root-rem;
@base-color: #32393e;
@base-color2: #3a4248;
html {
    font-size: @root-font-size;
}
body {
    margin: auto;
    font-size: 14/@rem;
    background: #eeeeee;
}
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}
a, input, textarea, select, button {
    outline: 0;
}
a {
    color: #0894ec;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: transparent;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type:none
}
ul li {
        display: block;
        text-align: left;
        margin: 0;
        padding: 0;
        list-style: none;
}

.appearance(@value:none) {
    -webkit-appearance: @value;
    -moz-appearance: @value;
    -ms-appearance: @value;
    appearance: @value;
}
.transition(@attr) {
    -moz-transition: @arguments;
    -webkit-transition: @arguments;
    -o-transition: @arguments;
    transition: @arguments;
}
.border(@px, @solid, @color) {
    border: @px/@rem @solid @color;
}
.border-radius(@rad:2) {
    border-radius: @rad/@rem;
}
.btn-type(@color1, @color2) {
    border-color: @color1;
    color: @color1;
    &:active {
        border-color: @color2;
        color: @color2;
    }
    &.btn-fill {
        color: #FFF;
        background: @color1;
        border: none;
        &:active {
            background: @color2;
        }
    }
}
.border-top() {
    &:after {
        position: absolute;
        content: '';
        width: 100%;
        left: 0;
        top: -0.5/@rem;
        height: 1/@rem;
        background: #ddd;
        display: block;
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        transform: scaleY(.5);
    }
}

.border-bottom() {
    &:before {
        position: absolute;
        content: '';
        width: 100%;
        left: 0;
        bottom: 0;
        height: 1/@rem;
        background: #ddd;
        display: block;
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        transform: scaleY(.5);
    }
}

.border-left() {
    &:before {
        position: absolute;
        content: '';
        width: 1/@rem;
        left: 0;
        bottom: 0;
        height: 100%;
        background: #ddd;
        display: block;
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        transform: scaleX(.5);
    }
}

.border-t {
    .border-top();
}

.border-b {
    .border-bottom();
}
.border-l {
    .border-left();
}

.btn {
    margin: 0;
    text-align: center;
    padding: 0 10/@rem;
    .border(1, solid, #0894ec);
    color: #0894ec;
    font-size: 14/@rem;
    .border-radius();
    line-height: 28/@rem;
    // height: 28/@rem;
    .appearance(none);
    background: none;
    .transition(all .1s);
    &:active {
        border-color: #0a8ddf;
        color: #0a8ddf;
    }
    &.btn-fill {
        color: #FFF;
        background: #0894ec;
        border: none;
        &:active {
            background: #0a8ddf;
        }
    }
    &.btn-shadow {
        .border(0, solid, #0894ec);
        box-shadow: 0 0 .05rem;
    }
    &.btn-success {
        .btn-type(#4cd964, #2ac845);
    }
    &.btn-danger {
        .btn-type(#f6383a, #f00b0d);
    }
    &.btn-warning {
        .btn-type(#ff6600, #cc5200);
    }
    &.btn-disabled {
        .btn-type(#a1a1a1, #a1a1a1);
    }
    &.btn-sm {
        font-size: 12/@rem;
        line-height: 24/@rem;
    }
    &.btn-lg {
        line-height: 38/@rem;
    }
}

.flex-box {
    display: flex;
}
.flex {
    flex: 1;
    text-align: center;
}
.input-search {
    .flex-box;
    // &:before {
    //     margin: 10/@rem;
    //     content: '';
    //     .icon-svg;
    //     background-image: url(svg/search.svg);
    // }
    .icon-search {
        margin: 5/@rem;
        .icon-svg;
        background-image: url(/static/svg/search.svg);
    }
    .input {
        .flex;
        text-align: left;
    }
    .btn {
        margin-left: 5/@rem;
    }
}
.input {
    width: 100%;
    padding: 0 10/@rem;
    margin: 0;
    .border(1, solid, #ddd);
    .border-radius();
    line-height: 28/@rem;
    background: #FFF;
    &.input-line {
        .border-radius(0);
        border: 0;
    }
    &.input-lg {
        line-height: 38/@rem;
        height: 40/@rem;
    }
}
.textarea {
    &.input {
        line-height: 20/@rem;
        min-height: 60/@rem;
    }
}
@input-checkbox-size: 24;
.input-checkbox {
        width: (@input-checkbox-size*2 + 2) / @rem;
        height: (@input-checkbox-size + 2) / @rem;
        position: relative;
        vertical-align: top;
        border: .05rem solid #dddddd;
        background-color: #dddddd;
        .border-radius;
        background-clip: content-box;
        display: inline-block;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear;
    &:before {

            width: (@input-checkbox-size)/@rem;
            height: (@input-checkbox-size)/@rem;
            position: absolute;
            top: 0;
            left: 0;
            .border-radius;
            background-color: #fff;
            content: '';
            -webkit-transition: left 0.2s;
            transition: left 0.2s;
    }
    &:checked:before {
        left: @input-checkbox-size/@rem;
    }
    &:checked {
        border-color: #03a9f4;
        background-color: #03a9f4;
    }
}
@input-radio-size: 18;
.input-radio {
    width: (@input-radio-size + 2) / @rem;
    height: (@input-radio-size + 2) / @rem;
    margin: 3/@rem;
    position: relative;
    vertical-align: middle;
    margin-top: -0.125rem;
    border: .05rem solid #dddddd;
    background-color: #dddddd;
    .border-radius;
    background-clip: content-box;
    display: inline-block;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8/@rem;
        margin-left: -4/@rem;
        .border-radius;
        width: 5/@rem;
        height: 10/@rem;
        border: solid 3/@rem #FFF;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
        -webkit-transition: left 0.2s;
        transition: left 0.2s;
    }
    &:checked {
        border-color: #03a9f4;
        background-color: #03a9f4;
    }
}

.item-line {
    padding: 5/@rem 0;
    position: relative;
    .flex-box;
    line-height: 28/@rem;
    background: #FFF;
    &:after {
        position: absolute;
        content: '';
        width: 100%;
        left: 0;
        bottom: 0;
        height: 1/@rem;
        background: #ddd;
        display: block;
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        transform: scaleY(.5);
    }
    .item-title {
        color: #666;
        padding: 0 10/@rem;
        text-align: right;
        width: 80/@rem;
    }
    .item-input {
        flex: 1;
    }
    &.item-lg {
        line-height: 38/@rem;
    }
}

.card {
    &.card-line {
        box-shadow: none;
        margin: 0;
        margin-top: 10/@rem;

    }
    background: #fff;
    box-shadow: 0 1/@rem 0.1rem #c8cfd1;
    margin: 10/@rem;
    position: relative;
    .border-radius(4);
    overflow: hidden;
}
.card-header {
    position: relative;
    .border-bottom();
    padding: 10/@rem 15/@rem;
    border-radius: 2/@rem 2/@rem 0 0;
}
.card-content {
    padding: 10/@rem 15/@rem;
    border-radius: 2/@rem 2/@rem 0 0;
}
.card-footer {
    position: relative;
    .flex-box;
    .border-top();
    padding: 10/@rem 15/@rem;
    border-radius: 2/@rem 2/@rem 0 0;
    -webkit-justify-content:space-between;
    justify-content:space-between;
}

.tab {
    .tab-header {
        .flex-box;
        line-height: 38/@rem;
        background: #FFF;

        .tab-link {
            margin: 0 5/@rem;
            text-align: center;
            flex: 1;
            &.tab-active {
                border-bottom: 1px solid #0894ec;
            }
        }
    }
    &.tab-toggle {
        .tab-content {
            display: none;
        }
        &.tab-toggle-show {
            .tab-content {
                display: block;
            }
        }
    }
    .tab-content {
        padding: 10/@rem;
        .tab-page {
            display: none;
            &.tab-active {
                display: block;
            }
        }
    }
    &.tab-touch {
        overflow:hidden;
        .tab-header {
            display: block;
            white-space: nowrap;
            word-break: keep-all;
            font-size: 0;
            .tab-link {
                display: inline-block;
                font-size: 14/@rem;
            }
        }
    }
}
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis-more(@line) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
    overflow: hidden;
}
.ellipsis-2 {
    .ellipsis-more(2);

}
.backgroundImage(@url) {
    background-image: @url;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.icon-svg {
    display: block;
    width: 20/@rem;
    height: 20/@rem;
    .backgroundImage('');
}

.list {
    line-height: 38/@rem;
    &.list-lg {
        font-size: 15/@rem;
        line-height: 48/@rem;
    }
    &.list-border-bottom {
        .list-group {
            .list-item {
                .border-bottom();
                &.list-item-icon {
                    padding-left: 50/@rem;
                    img {
                        left: 20/@rem;
                    }
                }
            }
        }
    }
    .list-group {
        &.border-bottom {
            .list-item {
                border-bottom: 1/@rem solid #eee;
                &:last-child {
                    border-bottom: none;
                }
            }
        }
        &.list-arrow {
            .list-item {
                padding-right: 38/@rem;
                &:after {
                    content: '';
                    position: absolute;
                    right: 11/@rem;
                    top: 50%;
                    margin-top: -8/@rem;
                    width: 16/@rem;
                    height: 16/@rem;
                    .backgroundImage(url(/static/svg/arrow-right.svg));
                }
            }
        }
        .list-item {
            position: relative;
            display: block;
            color: #333;
            padding: 0 10/@rem;
            background: #FFF;
            &.list-item-icon {
                padding-left: 38/@rem;
                img {
                    position: absolute;
                    left: 10/@rem;
                    top: 50%;
                    margin-top: -12/@rem;
                    height: 24/@rem;
                    width: 24/@rem;
                }
            }
            &.list-item-image-text {
                display: flex;
                padding: 10/@rem;
                height: 80/@rem;
                .list-item-image {
                    width: 60/@rem;
                    height: 60/@rem;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .list-item-text {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-right: 28/@rem;
                    margin-left: .25rem;
                    line-height: 20/@rem;
                }
            }
        }
    }
}

.backgroundLinearGradient(@option1, @option2) {
    background: -webkit-linear-gradient(@option1, @option2); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(@option1, @option2); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(@option1, @option2); /* Firefox 3.6 - 15 */
    background: linear-gradient(@option1, @option2); /* 标准的语法 */
}
.header-height {
    height: 45/@rem;
}
.header {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 28rem;
    z-index: 99;
    .flex-box();
    line-height: 45/@rem;
    height: 45/@rem;
    color: #FFF;
    a {
        color: #FFF;
    }
    font-size: 16/@rem;
    background: @base-color;
    box-shadow: 0 0 0.5rem @base-color;
    justify-content:space-between;
    align-items: center;
    .icon-svg {
        margin: .625rem;
    }
    .menu {
        background-image:url(svg/menu.svg);
    }
    .user {
        background-image:url(svg/user.svg);
    }
    .header-back{
        .flex-box();

        padding: 11/@rem;
        .back-word {
            line-height: 20/@rem;
        }
    }
    .header-title{
        text-align: center;
    }
    .header-nav{
        padding: 11/@rem;
        .flex-box();

        padding: 11/@rem;
        .nav-word {
            line-height: 20/@rem;
        }
    }

    .header-left {
        position: absolute;
        left: 0;
    }
    .header-right {
        position: absolute;
        right: 0;
    }
    .header-center {
        // position: absolute;
        // right: 0;
        // width: 100%;
        // text-align: center;
        // z-index: -1;
    }
}

.left-menu-list-open {
    overflow: hidden;
}
.left-menu-list {
    position: fixed;
    left: 0;
    top: 45/@rem;
    right: 0;
    bottom: 0;
    visibility: hidden;
    z-index: 100;
    .menu-list-body {
        position: absolute;
        left: 0;
        top: 0;
        width: 66%;
        margin-left: -66%;
        bottom: 0;
        z-index: 10011;
        overflow: auto;
        background: #FFF;
        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;
    }
    .modal-overlay {
        position: absolute;
    }
    &.left-menu-list-show {
        visibility: visible;
        .menu-list-body {
            margin-left: 0;
        }
        .modal-overlay {
            .modal-overlay.modal-overlay-visible;
        }
    }
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 270/@rem;
    z-index: 10011;
    overflow: hidden;
    .border-radius();
    text-align: center;
    background: #fff;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0) scale(1.185);
    transform: translate3d(0, 0, 0) scale(1.185);
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
    color: #3d4145;

    .modal-header {
        position: relative;
        .border-bottom;
        text-align: center;
        line-height: 40/@rem;
    }
    .modal-content {
        padding: 18/@rem;
    }
    .modal-footer {
        position: relative;
        .flex-box;
        .border-top;
        text-align: center;
        padding: 10/@rem;
        .modal-btn {
            position: relative;
            line-height: 20/@rem;
            flex: 1;
            .border-left();
            &:first-child {
                &:before {
                    width: 0;
                }
            }
        }
    }
    &.modal-in {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0) scale(1);
    }
    &.modal-msg {
        background: rgba(0, 0, 0, 0.8);
        .border-radius();
        color: white;
        padding: 0 10/@rem;
        height: 30/@rem;
        line-height: 30/@rem;;
        font-size: 14/@rem;
        width: auto;
        .modal-content {
            padding: 0;
        }
    }
}
.modal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10010;
    visibility: hidden;
    opacity: 0;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    &.modal-overlay-visible {
        visibility: visible;
        opacity: 1;
    }
}

.nav-touch {
    overflow: hidden;
    .nav-touch-box {
        white-space: nowrap;
        word-break: keep-all;
        background: #FFF;
        padding: 10/@rem 0;
        font-size: 0;
        .nav-link {
            position: relative;
            height: 20/@rem;
            line-height: 20/@rem;
            padding: 0 10/@rem;
            font-size: 14/@rem;
            // .border-left();
            &:first-child {
                &:before {
                    width: 0;
                }
            }
        }
    }
}

.banner {
    img {
        display: block;
        width: 100%;
    }
}
.btn2 {
    // border: .05rem solid #665ce6;
    box-shadow: 0 0 2px #665ce6;
    // box-shadow: 0 0 .1rem rgba(255, 255, 255, 0.3) inset;
    padding: .5rem;
    color: #FFF;
    border-radius: .05rem;
    background: linear-gradient(#665ce6, #665ce6);
    .transition(all .3s);

}
.btn2:active {
    color: rgba(255, 255, 255, 0.6);
    // text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
    background: linear-gradient(#9088ec, #9088ec);
}